<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>兄弟、群组选择器</title>
		<style>
			/*兄弟选择器： 两种结构①通用兄弟选择器【针对平行元素】
			 特点：找到当前元素名字一致的其他元素
			 语法：平行元素选择器~平行元素选择器
			 ②相邻兄弟选择器【针对平行元素】
			 特点：找到当前元素名字相邻的其他元素
			 语法：平行元素+平行元素选择器
			 功能：选择平行元素
			 */
			/*  h2~span{
				background-color: #ee5527;
			} */
			h1+span{
				background-color:#ee5527;
			}
			/* ⑩群组选择器：选择所有选中的选择器【针对 群：范围元素】
			用法：通用选择器下面出现
			 语法：任意选择器，任意选择器
			 */
			#s1,h2,h1,.s3{
				
			}
		</style>
	</head>
	<body>
		<h2>通用选择器</h2>
		<span id="s1">Lorem1<span>
		<span>Lorem2</span>
		<span class="s3">Lorem3</span>
		<h2>相邻兄弟选择器</h2>
		<span>Lorem1</span>
		<span>Lorem2</span>
		<span>Lorem3</span>
	</body>
</html>